import { Card, Form, Input, Switch, Button, message, Tabs } from 'antd';
import { useState } from 'react';

const { TabPane } = Tabs;

export default function Settings() {
  const [form] = Form.useForm();

  const handleSubmit = (values) => {
    console.log('Success:', values);
    message.success('保存成功');
  };

  return (
    <div>
      <Card>
        <Tabs defaultActiveKey="1">
          <TabPane tab="基本设置" key="1">
            <Form
              form={form}
              layout="vertical"
              onFinish={handleSubmit}
              initialValues={{
                siteName: 'CodePlay',
                siteDescription: '儿童创想乐园',
                contactEmail: 'contact@codeplay.com',
                contactPhone: '400-123-4567',
                enableRegistration: true,
                enableCreatorPlatform: true,
              }}
            >
              <Form.Item
                name="siteName"
                label="网站名称"
                rules={[{ required: true, message: '请输入网站名称' }]}
              >
                <Input />
              </Form.Item>

              <Form.Item
                name="siteDescription"
                label="网站描述"
                rules={[{ required: true, message: '请输入网站描述' }]}
              >
                <Input.TextArea rows={4} />
              </Form.Item>

              <Form.Item
                name="contactEmail"
                label="联系邮箱"
                rules={[
                  { required: true, message: '请输入联系邮箱' },
                  { type: 'email', message: '请输入有效的邮箱地址' }
                ]}
              >
                <Input />
              </Form.Item>

              <Form.Item
                name="contactPhone"
                label="联系电话"
                rules={[{ required: true, message: '请输入联系电话' }]}
              >
                <Input />
              </Form.Item>

              <Form.Item
                name="enableRegistration"
                label="开放注册"
                valuePropName="checked"
              >
                <Switch />
              </Form.Item>

              <Form.Item
                name="enableCreatorPlatform"
                label="开放创作者平台"
                valuePropName="checked"
              >
                <Switch />
              </Form.Item>

              <Form.Item>
                <Button type="primary" htmlType="submit">
                  保存设置
                </Button>
              </Form.Item>
            </Form>
          </TabPane>

          <TabPane tab="安全设置" key="2">
            <Form
              form={form}
              layout="vertical"
              onFinish={handleSubmit}
              initialValues={{
                passwordMinLength: 8,
                requireEmailVerification: true,
                requirePhoneVerification: true,
                enableTwoFactorAuth: false,
                sessionTimeout: 30,
                maxLoginAttempts: 5,
              }}
            >
              <Form.Item
                name="passwordMinLength"
                label="密码最小长度"
                rules={[{ required: true, message: '请输入密码最小长度' }]}
              >
                <Input type="number" min={6} max={20} />
              </Form.Item>

              <Form.Item
                name="requireEmailVerification"
                label="要求邮箱验证"
                valuePropName="checked"
              >
                <Switch />
              </Form.Item>

              <Form.Item
                name="requirePhoneVerification"
                label="要求手机验证"
                valuePropName="checked"
              >
                <Switch />
              </Form.Item>

              <Form.Item
                name="enableTwoFactorAuth"
                label="启用双因素认证"
                valuePropName="checked"
              >
                <Switch />
              </Form.Item>

              <Form.Item
                name="sessionTimeout"
                label="会话超时时间(分钟)"
                rules={[{ required: true, message: '请输入会话超时时间' }]}
              >
                <Input type="number" min={5} max={120} />
              </Form.Item>

              <Form.Item
                name="maxLoginAttempts"
                label="最大登录尝试次数"
                rules={[{ required: true, message: '请输入最大登录尝试次数' }]}
              >
                <Input type="number" min={3} max={10} />
              </Form.Item>

              <Form.Item>
                <Button type="primary" htmlType="submit">
                  保存设置
                </Button>
              </Form.Item>
            </Form>
          </TabPane>

          <TabPane tab="通知设置" key="3">
            <Form
              form={form}
              layout="vertical"
              onFinish={handleSubmit}
              initialValues={{
                enableEmailNotification: true,
                enableSMSNotification: true,
                enablePushNotification: true,
                notificationEmail: 'notifications@codeplay.com',
                smsProvider: 'aliyun',
                pushService: 'firebase',
              }}
            >
              <Form.Item
                name="enableEmailNotification"
                label="启用邮件通知"
                valuePropName="checked"
              >
                <Switch />
              </Form.Item>

              <Form.Item
                name="enableSMSNotification"
                label="启用短信通知"
                valuePropName="checked"
              >
                <Switch />
              </Form.Item>

              <Form.Item
                name="enablePushNotification"
                label="启用推送通知"
                valuePropName="checked"
              >
                <Switch />
              </Form.Item>

              <Form.Item
                name="notificationEmail"
                label="通知邮箱"
                rules={[
                  { required: true, message: '请输入通知邮箱' },
                  { type: 'email', message: '请输入有效的邮箱地址' }
                ]}
              >
                <Input />
              </Form.Item>

              <Form.Item
                name="smsProvider"
                label="短信服务商"
                rules={[{ required: true, message: '请选择短信服务商' }]}
              >
                <Input />
              </Form.Item>

              <Form.Item
                name="pushService"
                label="推送服务"
                rules={[{ required: true, message: '请选择推送服务' }]}
              >
                <Input />
              </Form.Item>

              <Form.Item>
                <Button type="primary" htmlType="submit">
                  保存设置
                </Button>
              </Form.Item>
            </Form>
          </TabPane>
        </Tabs>
      </Card>
    </div>
  );
} 